<template>
    <h1>数组监测</h1>

    <!-- 变更方法 -->
    <button @click="biangeng">变更数组</button>
    <div v-for="item in list1">{{ item }}</div>

    <!-- 替换方法 -->
    <button @click="tihuan">替换数组</button>
    <div v-for="item in list1">{{ item }}</div>

</template>

<script>
export default{
    data(){
        return {
           list1:[1,2,3],
           list2:[4,5,6]
        }
    },
    methods:{
        biangeng (){
            //UI自动更新
            this.list1.push(4)
        },
        tihuan (){
            //使用替换方法完成UI数组更新
            this.list1=this.list1.concat(this.list2)
        },
       
    }
}
</script>